<template>
  <view>
    <Header></Header>
    <view class="flex flex-col flex-center">
      <view class="title">{{ name }} </view>
      <view class="list">
        <view v-for="(item, index) in list" :key="index" class="item">
          <view class="flex">
            <view class="tag" v-if="item.children.length === 0">选择题</view>
            <view class="f36 ml1 g-c">{{ item.content }}</view>
          </view>
          <view class="item-btns flex" v-if="item.children.length === 0">
            <radio-group @change="(e) => radioChange(e, index)">
              <view v-for="(data, idx) in item.options.split('\n')" :key="idx" class="mt1 mb1">
                <radio :value="data" />
                {{ data }}
              </view>
            </radio-group>
          </view>
          <block v-else>
            <view v-for="(i, index1) in item.children" :key="index1" class="ml3">
              <view class="flex">
                <view class="tag">{{ i.type == 5 ? '解答题' : '选择题' }}</view>
                <view class="f36 ml1 g-c">{{ i.content }}</view>
              </view>
              <view class="item-btns flex" v-if="i.type != 5">
                <radio-group @change="(e) => radioChange1(e, index, index1)">
                  <view v-for="(data1, idx1) in i.options.split('\n')" :key="idx1" class="mt1 mb1">
                    <radio :value="data1" />
                    {{ data1 }}
                  </view>
                </radio-group>
              </view>
              <view v-else>
                <textarea placeholder="" v-model="i.answer" @input="((e) => input(e, index, index1))" />
              </view>
            </view>
          </block>
        </view>
      </view>
      <view class="btns" v-if="list.length > 0">
        <view class="btn" @click="submit">提交测评</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { topic, addall } from '/api'

const student_id = ref()
const testpaper_id = ref()
const list = ref([])
const rec = ref([])
const name = ref()

onLoad(async (options) => {
  student_id.value = options.student_id
  testpaper_id.value = options.testpaper_id
  init()
})

async function init() {
  const {
    data: { data }
  } = await topic({
    testpaper_id: testpaper_id.value
  })
  list.value = data
  name.value = data[0].infotestpaper.name
  rec.value = list.value.map((i) => {
    if (i.children.length === 0) {
      return {
        topic_id: i.topic_id,
        answer: ''
      }
    } else {
      return {
        children: i.children.map((i) => {
          return {
            topic_id: i.topic_id,
            answer: ''
          }
        })
      }
    }
  })
}

function radioChange(e, index) {
  rec.value[index].answer = e.detail.value.charAt(0)
}

function radioChange1(e, index, index1) {
  rec.value[index].children[index1].answer = e.detail.value.charAt(0)
}

function input(e, index, index1) {
  rec.value[index].children[index1].answer = e.detail.value
}

async function submit() {
  const params = reactive({
    student_id: student_id.value,
    testpaper_id: testpaper_id.value,
    rec: rec.value.reduce((acc, curr) => {
      if (curr.children) {
        return acc.concat(curr.children)
      } else {
        return acc.concat(curr)
      }
    }, [])
  })
  if (!hasEmptyValues(rec.value)) {
    const { status } = await addall(params)
    if (status === 200) {
      uni.reLaunch({
        url: `/pages/evaluating/result?student_id=${student_id.value}&testpaper_id=${testpaper_id.value}&title=${name.value}`
      })
    }
  } else {
    uni.showModal({
      title: '提示',
      content: '您还有未测评的内容，确定交卷吗?',
      success: async function (res) {
        if (res.confirm) {
          const { status } = await addall(params)
          if (status === 200) {
            uni.reLaunch({
              url: `/pages/evaluating/result?student_id=${student_id.value}&testpaper_id=${testpaper_id.value}&title=${name.value}`
            })
          }
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
}

function hasEmptyValues(arr) {
  for (let obj of arr) {
    for (let key in obj) {
      if (obj[key] === '') {
        return true
      }
    }
  }
  return false
}
</script>

<style lang="scss" scoped>
.title {
  margin-top: 200rpx;
  font-weight: bold;
  font-size: 36rpx;
  margin-bottom: 30rpx;
}

.list {
  padding: 30rpx;
  box-sizing: border-box;

  .item {
    margin-bottom: 30rpx;

    .tag {
      //padding: 6rpx 20rpx;
      width: 120rpx;
      height: 46rpx;
      box-sizing: border-box;
      background-color: rgba(54, 194, 170, 0.5);
      color: #333;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &-btns {
      margin-top: 30rpx;

      &-i {
        width: 120rpx;
        height: 50rpx;
        border: 2rpx solid #797979;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
      }

      &-active {
        border: 2rpx solid #377CB7;
        background-color: #377CB7;
        color: #fff;
      }
    }
  }
}

.btns {
  display: flex;
  margin-top: 100rpx;
  padding-bottom: 200rpx;

  .btn {
    width: 200rpx;
    height: 80rpx;
    border-radius: 10rpx;
    background-color: #377CB7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

textarea {
  border: 1px solid #ccc;
  width: 1000rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  padding: 30rpx;
  box-sizing: border-box;
}
</style>
